import React, { useEffect, useState } from "react";
import { Routes, Route, Outlet, useNavigate } from "react-router-dom";
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import "./basicLayout.less";
import { SiderMenu } from "./SiderMenu";
import { HeaderLayout } from "./header/index";
import { BreadcrumbNav } from "./BreadCrumbNav";
import Login from "@/pages/login";
import { getToken, setToken } from "./../utils/index";
import { WelcomePage } from "./../pages/welcome/index";
import { useDispatch } from "react-redux";
import { resetToken } from "@/store/userSlice";

const { Content, Sider } = Layout;

const App: React.FC = (props) => {
  console.log(props, "props");
  console.log(props.children, "children");
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const isLogin = getToken();
  const navigate = useNavigate();
  const dispatch = useDispatch();

  useEffect(() => {
    if (!isLogin) {
      // setToken("");
      dispatch(resetToken());
      navigate("/login");
    }
  }, [isLogin]);

  const url = window.location.pathname;

  return url === "/login" ? (
    <Login />
  ) : url === "/welcome" ? (
    <WelcomePage />
  ) : (
    <Layout style={{ height: "100%" }}>
      <HeaderLayout />
      <Content>
        <Layout style={{ height: "100%", background: colorBgContainer }}>
          <SiderMenu />
          <Content style={{ minHeight: 280 }}>
            <BreadcrumbNav />
            {props.children}
          </Content>
        </Layout>
      </Content>
    </Layout>
  );
};

export default App;
